<template>
	<view class="page">
		<view class="bg">
			<image :src="list.carImg"></image>
			<view class="bg-but" @click="$goBack(2,'/bundle/pages/parameter/parameter?user=1')">参数</view>
		</view>
		<view class="bgconter">
			<image src="../../../static/20231214094509.png"></image>
			<image class="bgimg" src="../../../static/0231214095504.png"></image>
			<view class="order" v-if="shows==false">
				<view class="order-name">
					<view class="name">{{list.carName}}</view>
					<view class="money" v-if="list.carPrice=='暂无报价'">暂无报价万起</view>
					<view class="money" v-else><text>{{list.carPrice.slice(0,5)}}</text></view>
				</view>
				<view class="order-list">
					<view style="font-weight: 600; font-size: 21rpx;">{{list.carSize}}</view>
					<view style="color: #333333;">容量</view>
				</view>
				<view class="order-list">
					<view style="font-weight: 600;font-size: 22rpx;">{{list.carEndurance.slice(5,9)}}</view>
					<view style="color: #333333;">续航</view>
				</view>
				<view class="order-list">
					<view style="font-weight: 600;font-size: 22rpx;">{{list.carElectricity}}</view>
					<view style="color: #333333;">电池</view>
				</view>
				<!-- 	<view style="margin-left: -30rpx;"> -->
				<u-icon name="arrow-right"  @click="$goBack(2,'/bundle/pages/parameter/parameter?user=1')"></u-icon>
				<!-- </view> -->
			</view>
		</view>
		<view class="content">
			<view class="order-name">全部车型</view>
			<u-line margin="20rpx 0rpx"></u-line>
			<view style="line-height: 50rpx;" v-for="(item,index) in listitem" :key="index">
				<view class="store">{{item.carName}}</view>
				<view class="content-money">厂商指导价：<text style="color: #FF0000;">{{item.carPrice}}</text></view>
				<view class="but"> 

					<view>车型图片</view>
					<view  @click="listp(item)">参数</view>
					<view class="butt" @click="about(item.id)">询底价</view>
				</view>
				<u-line margin="20rpx 0rpx"></u-line>
			</view>
		</view>
		<view class="button" @click="about(list.id)">获取底价</view>
		<u-toast ref="uToast"></u-toast>
		<u-popup :show="shows" mode="center":round="10">
			<view style="text-align: center; font-size:34rpx ; margin: 10rpx;">请输入您的电话号码和姓名</view>
			<view style="text-align: center; font-size:24rpx ; margin: 10rpx;">*方便业务人员和你联系*</view>
			<view style="padding: 30rpx">
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
					<u-form-item label="姓名" prop="reservationOrder.userName" borderBottom ref="item1">
						<u--input v-model="model1.reservationOrder.userName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="电话" prop="reservationOrder.userPhone" borderBottom ref="item1">
						<u--input v-model="model1.reservationOrder.userPhone" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
					
			<view style="display: flex;">
				<u-button type="primary" @click="submit">确定提交</u-button>
				<u-button @click="close" >取消</u-button>
			</view>

		</u-popup>
	</view>
</template>

<script>
	import {
		apidetail,
		apisubmit,
		apigetByBrandId
	} from '@/api/car.js'
	export default {
		data() {
			return {
				ids:'',
				shows:false,
				listitem:[],
				id: '',
				list: {},
				model1: {

					reservationOrder: {
						userName: '',
						userPhone: '',
						id: ''
					},
				},
				rules: {
					'reservationOrder.userName': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'reservationOrder.userPhone': {
						type: 'string',
						required: true,
						message: '请填写电话',
						trigger: ['blur', 'change']
					},
				},
				ids: '',
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(e) {
			this.id = e.id
			this.detail()


		},
		methods: {
			close(){
				this.shows=false
			},
			about(e){
				this.shows=true
				this.ids=e.id
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					apisubmit(this.model1).then((res) => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'default',
								message: "提交成功"
							})
						}
					})

				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			getByBrandId() {
				let id = this.list.carId
				apigetByBrandId(id).then((res) => {
					this.listitem=res.data
					// this.itemArr = res.data
					// console.log(res.data)
				})
			},
			detail() {
				let params = {
					id: this.id
				}
				console.log(params)
				apidetail(params).then((res) => {
					console.log(res)
					this.list = res.data
					this.$store.commit("setparameter",res.data)
					wx.setNavigationBarTitle({
						title: this.list.carName
					})
					this.getByBrandId()
				})
			},
			listp(item){
				this.$goBack(2,'/bundle/pages/parameter/parameter?user=2')
				this.$store.commit("setparameter",item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #fff;
		width: 100%;
		height: 100%;
		position: relative;
	}

	.bg {
		text-align: center;
		width: 100%;
		height: 400rpx;
		box-sizing: border-box;
		position: relative;

		image {
			width: 560rpx;
			height: 400rpx;
		}

		.bg-but {
			position: absolute;
			right: 0;
			top: 250rpx;
			width: 100rpx;
			height: 50rpx;
			background-color: $theme-color;
			border-bottom-left-radius: 50rpx;
			border-top-left-radius: 50rpx;
			font-size: 28rpx;
			line-height: 50rpx;
		}

	}

	.bgconter {


		image {
			position: absolute;
			height: 700rpx;
			width: 100vw;
			z-index: 1;
		}

		.bgimg {
			position: absolute;
			margin: 18rpx;
			z-index: 2;
			width: 718rpx;
			height: 160rpx;
		}

		.order {
			position: absolute;
			z-index: 99999;
			display: flex;
			margin-top: 65rpx;
			font-size: 28rpx;

			.order-name {
				margin-right: 30rpx;
				margin-top: -20rpx;
				margin-left: 64rpx;

				.money {
					text {
						font-weight: 600;
						color: #FF0000;
						font-size: 56rpx;
					}
				}

			}

			.order-list {
				margin: 10rpx;
				width: 120rpx;
			}

		}
	}

	.content {
		position: absolute;
		z-index: 2;
		width: 718rpx;

		margin: 200rpx 16rpx 10rpx 16rpx;
		padding: 26rpx 20rpx 60rpx 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;

		.order-name {
			font-size: 32rpx;
			font-weight: 600;
		}

		.store {
			font-size: 28rpx;
			font-weight: 600;
		}

		.content-money {
			margin-bottom: 8rpx;
			color: #2A2A29;
			font-size: 28rpx;
		}

		.but {

			margin-top: 14rpx;
			font-size: 30rpx;
			color: #257CFF;

			color: #2E2E2E;
			display: flex;
			justify-content: flex-end;

			view {
				width: 160rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				background-color: #F5F5F5;
				border-radius: 30rpx;
				margin-right: 10rpx;
				font-size: 24rpx;
			}

			.butt {
				background-color: #FBCC32;
			}

		}

	}

	.button {
		z-index: 9999;
		position: fixed;
		bottom: 0rpx;
		right: 0rpx;
		padding: 20rpx 60rpx;
		font-size: 30rpx;
		background-color: $theme-color;
		font-weight: 600;
	}

	::v-deep .u-icon {
		margin-left: -30rpx;
	}
</style>